
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!--CHAT SYSTEM START-->

	<head>
		 <title>Chat System :showing room</title>
		<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/main.css'}">
        #{get 'moreStyles' /}
        <script src="@{'/public/javascripts/jquery-1.4.min.js'}" type="text/javascript" charset="utf-8"></script>
        <script src="@{'/public/javascripts/date.js'}" type="text/javascript" charset="utf-8"></script>
       	<script src="@{'/public/javascripts/more.js'}" type="text/javascript"charset="utf-8"></script>
		<script type="text/javascript" src="/public/javascripts/jquery.gritter.min.js"></script>

</head>
<body onload=" signIn(${room.id}) " onUnload=" signOut(${room.id})"> 
<table style="border:0;>
<tr style="border:0;height:20px">
<td class="chatContainerHeader" style="text-align:center; width:100% !important;height:20px">
									Estimation game Chat 
				
</td>
</tr>
<tr style="height:100%">
<td id="chatHolder" style="width:100% !important;height:100%;padding:0px">
									<div id="thread" class="thread" style="width:100% !important;padding:0px!important;height:430px;">
										<script type="text/html" id="message_tmpl">
											<div class="<%= message.author == 'notice' ? 'notice allCornersRounded' : message.author == '${controllers.Security.getConnected().name}' ? 'you' : 'them' %>">		
												<strong class="title" style="<%= message.author == 'notice' ? 'display:none !important' : '' %>"><%= message.author%></strong> 
												<%= message.message.replace('\n', '<br/>') %>
											</div>
										</script>
										<div id ="threader"></div>
									</div>
</td></tr>
<tr style="height:55px">
<td id="newMessage" class="chatboxinput" >	
										<textarea id="message" name="message" class="chatboxtextarea" style="width:99%"></textarea></td>
</tr>
</table>
					
									



<script type="text/javascript">

	$('#message').keypress(function(event){
		if (event.keyCode == '13')
		{	var message = $('#message').val();
			$('#message').val('');
			$.post('@{ChatSystem.addMessage()}', {message: message , id:${room.id}}); 
			$('#message').focus(); }
	  });

	// Retrieve new messages
	var getMessages = function() {
		$.getJSON('/ChatSystem/newMessages',{id:${room.id}}, function(messages) {
			$(messages).each(function() {
				display(this);
			});
			setTimeout('getMessages();', 600);
		});
	}	
	$(function() {
		getMessages();
	});
	
	// Display a message
	var display = function(message) {
		$('#thread').append(tmpl('message_tmpl', {message: message}));
		var obj = document.getElementById('thread');
		obj.scrollTop = obj.scrollHeight;
	}
	
	function signIn(id)
	{
		$.post('/ChatSystem/enterChat',{id:id});
	}
	
	function signOut(id)
	{
		$.post('/ChatSystem/leaveChat',{id:id});
	}
	
</script>
</body>
<!--CHAT SYSTEM End-->
</html>
